      {# TABS #}
      <div id="adventures" data-cy="adventures">
        {% macro adventure_tab(tabname, title, selected, id, tab_class, checked, index) %}
            <div
                class="tab {% if selected %}tab-selected{% endif %} flex items-center justify-center whitespace-nowrap {{ tab_class }}"
                id="{{ id }}"
                tabindex="{{ index }}"
                data-tab="{{ tabname }}"
                data-cy="{{ title if tab_class == 'teacher_tab' else tabname }}"
                >
                {{title}}
                {% if checked %}
                    <i class="fa-solid fa-square-check ltr:ml-2 rtl:mr-2 text-blue-600"></i>
                {% endif %}
            </div>
        {% endmacro %}

        <div class="overflow-x-auto overflow-y-hidden px-2 pt-2">
        <div class="flex flex-row w-min" id="adventures_buttons">
            {% for adventure in adventures %}
                {% if adventure.is_teacher_adventure %}
                    {{ adventure_tab(adventure.short_name, adventure.name, adventure.short_name == initial_tab, 'adventure' + loop.index|string, 'teacher_tab', adventure.is_checked, loop.index ) }}
                {% elif adventure.is_command_adventure %}
                    {{ adventure_tab(adventure.short_name, adventure.name, adventure.short_name == initial_tab, 'adventure' + loop.index|string, 'command_tab', adventure.is_checked, loop.index ) }}
                {% else %}
                    {{ adventure_tab(adventure.short_name, adventure.name, adventure.short_name == initial_tab, 'adventure' + loop.index|string, '', adventure.is_checked, loop.index) }}
                {% endif %}
            {% endfor %}
        </div>
      </div>
      {# PANES #}
      <div id="adventures_tab" data-cy="adventures_tab" class="w-full overflow-auto bg-white mb-5 shadow-md">
        {% for adventure in adventures %}
          <div data-tabtarget="{{adventure.short_name}}" class="
                {% if adventure.short_name != initial_tab %}hidden{% endif %}
                p-4
                "
                >
            {% include "incl/adventure-content.html" %}
          </div>
        {% endfor %}
      </div>
    </div>
